<template>
  <div class="message-controls">
    <div class="AI-chat" v-if="boss">
      <img src="../../assets/icons/AI聊天机器人.png" alt="" />
      <div class="open-message">
        <span>欢迎体验AI聊天机器人服务！我将接收之后收到的消息，并自动回复对方的询问。</span>
        <!-- 一个切换按钮 -->
        <div>
          <el-switch
            v-model="openAI"
            inline-prompt
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="开启"
            inactive-text="关闭"
          ></el-switch>
        </div>
      </div>
    </div>
    <div class="chat-im chat-editor">
      <div class="chat-controls">
        <div aria-label="表情" class="icon btn-emotion tooltip tooltip-top"></div>
        <div aria-label="常用语" class="icon btn-dict tooltip tooltip-top"></div>
        <div aria-label="优先提醒" class="icon btn-online tooltip tooltip-top"></div>
        <div aria-label="发送图片" class="icon btn-sendimg tooltip tooltip-top">
          <input type="file" accept="image/gif,image/jpeg,image/jpg,image/png" />
        </div>
        <i class="vline"></i>
        <template v-if="boss">
          <div class="toolbar-btn tooltip tooltip-top">请求简历</div>
          <div class="toolbar-btn tooltip tooltip-top">发送合同</div>
          <div class="toolbar-btn tooltip tooltip-top">发送offer</div>
        </template>
        <template v-else>
          <div aria-label ="发送简历" class="btn-resume toolbar-btn tooltip tooltip-top">发简历</div>
          <div aria-label ="您有offer接收" class=" toolbar-btn tooltip-top tooltip btn-offer" v-if="offer">接收offer
            <i class="dot"></i>
          </div>
          <div aria-label ="您有合同签收" class=" toolbar-btn tooltip tooltip-top btn-contract" v-if="contract">接收合同
            <i class="dot"></i>
          </div>
          <div class="prompt">
            <img src="../../assets/icons/AI聊天机器人.png" class="prompt-AI">
            <span class="prompt-message" v-if="offer">您有收到offer,请注意查收哦!</span>
            <span class="prompt-message" v-if="contract">您有收到合同,请注意查收哦!</span>
          </div>
        </template>

        <!---->
      </div>
      <div
        contenteditable="true"
        id="chat-input"
        class="chat-input"
        @input="inputChange"
        ref="inputMessage"
      ></div>
      <div class="chat-op">
        <span class="tip">按Enter键发送，按Ctrl+Enter键换行</span
        ><button
          type="send"
          class="btn-send btn-sure"
          :class="{ disabled: disabled }"
          @click="sendMessage"
        >
          发送
        </button>
      </div>
      <div class="sentence-panel" style="display: none">
        <div class="header">
          <h3 class="title">常用语</h3>
          <a href="/web/geek/notify-set?ka=notify-set" target="_blank" class="set-btn">设置</a>
        </div>
        <ul>
          <li>我可以把我的简历发给您看看吗？</li>
          <li>我可以去贵公司面试吗？</li>
          <li>对不起，我觉得该职位不适合我，祝您早日找到满意的工作人选</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useWebSocketStore } from '@/store/modules/webSocket.ts'
import { nextTick } from 'vue'
const props = defineProps({
  dialogueInfo: {
    type: Object,
    required: true
  },
  boss: {
    type: Boolean,
    required: true
  }
})
const offer = ref(false)
const contract = ref(true)
const emits = defineEmits(['scrollToBottom'])
const webSocketStore = useWebSocketStore()
const openAI = ref(false)
let disabled = ref(true)
let inputMessage = ref(null)

function inputChange() {
  disabled.value = inputMessage.value.innerText === ''
}
// 这里进行消息发送
function sendMessage() {
  let message = inputMessage.value.innerText
  console.log(message)
  console.log(props.dialogueInfo)
  let data = Object.assign({}, props.dialogueInfo, { message })
  console.log(data)
  webSocketStore.messageList.push(data)
  console.log(webSocketStore.messageList)
  let text = JSON.stringify(data)
  console.log(text)
  webSocketStore.sendMessage(JSON.stringify(data))
  inputMessage.value.innerText = ''
  nextTick(() => {
    emits('scrollToBottom')
  })
}
</script>

<style scoped>
.message-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 160px;
}

.chat-im {
  margin-bottom: -152px;
}

.chat-editor {
  position: relative;
  padding: 0 30px;
  height: 160px;
  border-top: 1px solid #e6e8eb;
  background-color: #fff;
  border-radius: 0 0 16px 0;
}

.chat-controls {
  user-select: none;
  padding: 15px 0 0;
}

.chat-controls div.icon {
  width: 24px;
  height: 24px;
  background: url(https://static.zhipin.com/fe-zhipin-geek/web/chat/v5150/static/images/icons-chat-input-new.ca8e289b.png)
    no-repeat;
  transition: none;
  background-size: 102px 102px;
  margin-right: 20px;
  cursor: pointer;
}

.chat-controls div.btn-emotion {
  background-position: -5px -5px;
}

.chat-controls div.btn-emotion:not(.unable):hover {
  background-position: -39px -5px;
}

.chat-controls div.btn-dict {
  background-position: -5px -39px;
}

.chat-controls div.btn-dict:not(.unable):hover {
  background-position: -39px -39px;
}

.chat-controls div.btn-online {
  background-position: -73px -5px;
}

.chat-controls div.btn-online:hover {
  background-position: -73px -39px;
}

.chat-controls div.btn-sendimg {
  background-position: -5px -73px;
}

.chat-controls div.btn-sendimg:hover {
  background-position: -39px -73px;
}

.chat-controls div.btn-sendimg input {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  width: 24px;
}

.chat-controls .unable {
  cursor: default;
  color: #999;
}

.chat-controls .vline {
  height: 16px;
  margin-right: 20px;
  margin-left: 0;
  margin-top: 5px;
  vertical-align: top;
}

.chat-controls div.toolbar-btn {
  height: 22px;
  border-radius: 4px;
  border: 1px solid #e6e8eb;
  padding: 0 10px;
  line-height: 23px;
  vertical-align: top;
  margin-right: 10px;
  box-sizing: content-box;
  cursor: pointer;
}

.chat-controls div.toolbar-btn:not(.unable):hover {
  border-color: transparent;
  color: #00a6a7;
  background-color: rgba(0, 190, 189, 0.1);
}

.chat-controls .tooltip:hover::after {
  transform: translateX(-50%) translateY(-16px);
}

.chat-controls .tooltip:hover::after {
  transform: translateX(-50%) translateY(-16px);
}

.chat-controls .tooltip:hover::before {
  transform: translateY(-16px);
}

.chat-input {
  user-select: none;
  overflow: auto;
  overflow-x: hidden;
  height: 55px;
  color: #000;
  outline: none;
}

.chat-op {
  user-select: none;
  padding-bottom: 5px;
  padding-top: 5px;
  text-align: right;
}

.chat-op .tip {
  padding-right: 20px;
  color: #ccc;
}

.chat-op .btn-send {
  font-size: 14px;
  line-height: 26px;
  min-width: auto;
  height: 28px;
  margin-right: 0;
  padding: 0 16px;
  border-radius: 6px;
}

.btn-send.btn-sure {
  padding: 0 20px;
  background: #00bebd;
  border-color: #00bebd;
  font-size: 14px;
  font-weight: 400;
  color: #fff;
}
.btn-send:last-child {
  margin-right: 0;
}

.btn-send {
  display: inline-block;
  padding: 0 20px;
  border-radius: 4px;
  transition: none;
  border: 1px solid #5dd5c8;
  background-color: #62d5c8;
  color: #fff;
  font-size: 14px;
  line-height: 26px;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 10px;
  transition: all 0.3s;
}

.btn-send img {
  width: 16px;
  height: 16px;
  vertical-align: text-top;
}

.btn-send.btn-light {
  padding: 0 20px;
  background: rgba(0, 190, 189, 0.1);
  border-color: transparent;
  font-size: 14px;
  font-weight: 400;
  color: #00a6a7;
}

.chat-op .disabled,
.chat-op .disabled:hover {
  cursor: default;
  color: #ededed;
  border-color: #ededed;
  background-color: #fff;
}

.btn-send:hover {
  background-color: #00a6a7;
  border-color: #00a6a7;
}

.AI-chat {
  position: absolute;
  top: -80px;
  margin-right: 20px;
}

.AI-chat img {
  width: 80px;
  height: 80px;
}

.open-message {
  position: absolute;
  bottom: 70px;
  left: 55px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  display: none;
  width: 400px;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  padding: 20px;
  border-radius: 16px 16px 16px 0;
  z-index: 1;
}

.AI-chat:hover .open-message {
  display: flex;
}

:deep(.el-switch__core) {
  border-radius: 2px;
}

:deep(.el-switch__action) {
  border-radius: 2px;
}

.open-message div {
  margin-left: 20px;
}

.btn-offer,.btn-contract {
  position: relative;
  background-color: #f5a623;
  border-color: #f5a623;
  color: #fff;
}
.dot{
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: #f00;
  border-radius: 50%;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
}

.prompt{
  display: flex;
  position: absolute;
  top: -200px;
  right: -25px;
  align-items: center;
  margin-top: 10px;
}

.prompt-AI{
  width: 80px;
  height: 80px;
  /* 旋转45deg */
  transform: rotate(-45deg)  translateX(25%);
}

.prompt-message{
  position: absolute;
  width: 200px;
  overflow: hidden;
  right: 80px;
  top: 0;
  font-size: 14px;
  color: #f00;
  text-align: center;
  padding: 5px;
  background-color: #fff;
  border-radius: 6px 6px 0 6px;
  background: rgba(0, 0, 0, 0.1);
}

</style>
